<template>
  <a-form-item class="subitemName">
    <span
      >{{ i + 1 + '. ' + subitem.name
      }}<span>{{
        subitem.type.includes('单选') ? '（单选）' : subitem.type.includes('多选') ? '（多选）' : ''
      }}</span></span
    >
  </a-form-item>
  <template v-if="['单选', '单选+输入'].includes(subitem.type)">
    <a-form-item class="subitemName">
      <a-row :gutter="[48, 8]">
        <template v-for="(option, s) in subitem.options" :key="s">
          <a-col>
            <a-space>
              <a-radio
                :checked="subitem.value === option.value"
                @change="radioChange(option, subitem)"
                :disabled="disabled"
                >{{ option.value }}</a-radio
              >
              <a-input
                v-if="option.input"
                style="width: 210px"
                v-model:value="subitem.inputText"
                @input="
                  () => {
                    subitem.value = option.value
                  }
                "
                :disabled="disabled"
                autocomplete="off"
                :maxlength="option.maxlength"
                placeholder=""
              />
            </a-space>
          </a-col>
        </template>
      </a-row>
    </a-form-item>
  </template>
  <template v-else-if="['多选', '多选+输入'].includes(subitem.type)">
    <a-form-item class="subitemNameCheckbox">
      <a-row :gutter="[48, 8]">
        <template v-for="(option, s) in subitem.options" :key="s">
          <a-col>
            <a-space>
              <a-checkbox
                :checked="subitem.value.includes(option.value)"
                @change="multipleChange($event, option.value, subitem, s)"
                :disabled="disabled"
                >{{ option.value }}</a-checkbox
              >
              <a-input
                v-if="option.input"
                style="width: 210px"
                v-model:value="subitem.inputText"
                @input="
                  () => {
                    subitem.value = Array.from(new Set(subitem.value).add(option.value))
                  }
                "
                :disabled="disabled"
                autocomplete="off"
                :maxlength="option.maxlength"
                placeholder=""
              />
            </a-space>
          </a-col>
        </template>
      </a-row>
    </a-form-item>
  </template>
  <template v-else-if="subitem.type === '输入'">
    <a-form-item class="subitemNameCheckbox">
      <a-textarea
        class="textarea"
        v-model:value="subitem.value"
        @input="onInput"
        :disabled="disabled"
        placeholder="请输入你的回答"
        :maxlength="500"
        autoSize
      />
      <template v-if="subitem.exc">
        <span class="unit">{{ subitem.exc.unit }}</span>
      </template>
    </a-form-item>
  </template>
  <template v-else-if="subitem.type === '搜索输入'">
    <a-form-item class="subitemNameCheckbox">
      <a-textarea
        class="textarea"
        v-model:value="subitem.value"
        @input="onInput"
        :disabled="disabled"
        placeholder="请输入你的回答"
        :maxlength="500"
        autoSize
      />
    </a-form-item>
  </template>
  <template v-else-if="subitem.type === '数字选择'">
    <a-form-item class="subitemNameCheckbox">
      <div class="tags">
        <a-tag
          class="tag"
          :key="tag"
          :color="subitem.value == subitem.config.min + tag - 1 ? '#94bfff' : ''"
          v-for="tag in subitem.config.max - subitem.config.min"
          @click="tagChange(subitem.config.min + tag - 1, subitem)"
          >{{ subitem.config.min + tag - 1 }}</a-tag
        >
        <div class="start">{{ subitem.config.min_label }}</div>
        <div class="end">{{ subitem.config.max_label }}</div>
      </div>
    </a-form-item>
  </template>
  <template v-else-if="subitem.type === '日期选择'">
    <a-form-item class="subitemNameCheckbox">
      <a-date-picker v-model:value="subitem.value" :format="'YYYY-MM-DD'" :disabled="disabled" />
    </a-form-item>
  </template>
  <template v-else-if="subitem.type === '时间选择'">
    <a-form-item class="subitemNameCheckbox">
      <a-time-picker v-model:value="subitem.value" format="HH:mm" :disabled="disabled" />
    </a-form-item>
  </template>
</template>

<script setup lang="ts">
const props = defineProps({
  // subitem: {
  //   type: Object,
  //   default: () => {
  //     return {}
  //   }
  // },
  i: {
    type: Number,
    default: 0
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const subitem = defineModel('subitem')

const emit = defineEmits(['change'])

const radioChange = (e, item) => {
  item.value = e.value
  item.sort = e.sort

  console.log(props.formData)
  emit('change')
}

const onInput = () => {
  emit('change')
}

const multipleChange = (e, val, item, i) => {
  if (e.target.checked) {
    if (item.options[i].exclusive) {
      item.value = [val]
      return
    }

    if (item.value.includes(val)) {
      return
    } else {
      for (let j = item.value.length; j > -1; j--) {
        const k = item.options.find((v) => {
          return item.value[j] === v.value && v.exclusive
        })
        if (k) {
          item.value.splice(j, 1)
        }
      }

      item.value.push(val)
    }
  } else {
    const i = item.value.findIndex((v) => {
      return v === val
    })
    if (i > -1) {
      item.value.splice(i, 1)
    } else {
      return
    }
  }

  item.sort = item.value.map((v) => {
    const c = item.options.find((u) => {
      return u.value === v
    })
    return c.sort
  })

  emit('change')
}

const tagChange = (e, subitem) => {
  if (props.disabled) {
    return true
  } else {
    subitem.value = e

    emit('change')

    return true
  }
}
</script>

<style scoped lang="less">
.ant-form-item {
  &.itemTitle {
    margin-bottom: 5px;

    .title {
      height: 32px;
      padding-left: 16px;
      font-family: 'PingFang SC';
      font-size: 14px;
      font-weight: 600;
      line-height: 32px;
    }
  }

  &.subitemName {
    margin-bottom: 0;
  }

  &.subitemNameCheckbox {
    margin-bottom: 0;
  }

  .textarea {
    width: 50%;
    padding-right: 16px;
    padding-left: 16px;
  }
}

.tags {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 32px;

  .start {
    position: absolute;
    top: 32px;
    left: 0;
  }

  .end {
    position: absolute;
    top: 32px;
    right: 0;
  }

  .tag {
    cursor: pointer;
    user-select: none;
  }
}

.unit {
  margin-left: 8px;
}
</style>
